<template>
  <div class="wh-full">
    <el-row :gutter="20" class="wh-full">
      <!-- 部门树 -->
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <dept-tree ref="deptTree" v-model="queryParams.deptId" class="wh-full" @node-click="onTreeClick" />
      </el-col>

      <!-- 用户列表 -->
      <el-col :lg="20" :xs="24">
        <div class="wh-full flex flex-col">
          <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="关键字" prop="keys">
                <el-input v-model="queryParams.keys" placeholder="名称/用户名" clearable style="width: 200px" @keyup.enter="reload" />
              </el-form-item>

              <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="全部" clearable class="!w-[100px]">
                  <el-option label="启用" value="enable" />
                  <el-option label="禁用" value="disable" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="reload">
                  <i-ep-search />
                  搜索
                </el-button>
                <el-button @click="resetSearchParams">
                  <i-ep-refresh />
                  重置
                </el-button>
                <slot name="tbar"></slot>
              </el-form-item>
            </el-form>
          </div>
          <div shadow="never" class="table-container flex-1">
            <vxe-grid ref="userGrid" v-if="inited" v-bind="gridOptions">
              <template #status_render="{ row }">
                <el-tag :type="row.status == 'enable' ? 'success' : 'info'">{{ row.status == 'enable' ? '启用' : '禁用' }} </el-tag></template
              >
              <template #pager>
                <!--使用 pager 插槽-->
                <vxe-pager
                  :layouts="pagerConfig.layout"
                  v-model:current-page="queryParams.page.currentPage"
                  v-model:page-size="queryParams.page.pageSize"
                  :total="queryParams.page.total"
                  @page-change="handlePageChange"
                />
              </template>
              <template v-for="(key, name) in $slots" #[name]="sloatData">
                <template v-if="name.startsWith('column_')">
                  <slot :name="name" v-bind="sloatData"></slot>
                </template>
              </template>
            </vxe-grid>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import { getUserPage } from '@/api/user';
  import { renderStoreHook } from '@/store/modules/render';
  import DeptTree from './dept-tree.vue';
  import { VxeGrid } from 'vxe-table';

  const props = defineProps({ exColumns: Array });

  const inited = ref(false);
  const renderStore = renderStoreHook();

  onBeforeMount(() => {
    // 组件作为初始请求的一部分被渲染
    renderStore.loadData(['dept']).then(() => {
      inited.value = true;
    });
  });

  const queryParams = reactive({
    keys: '',
    status: 'enable',
    deptId: '',
    page: {
      total: 0,
      currentPage: 1,
      pageSize: 10,
    },
  });
  const pagerConfig = reactive({
    layout: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
  });
  const gridOptions = reactive({
    border: true,
    loading: false,
    columnConfig: {
      resizable: true,
    },
    height: 'auto',
    autoResize: true,
    data: [],
    columns: [
      { type: 'seq', width: 60 },
      { type: 'checkbox', width: 50 },
      { field: 'name', title: '名称' },
      { field: 'loginName', title: '用户名' },
      {
        field: 'sex',
        title: '性别',
        formatter: ({ cellValue }) => {
          return !cellValue ? '' : cellValue === 'male' ? '男' : '女';
        },
      },
      {
        field: 'deptId',
        title: '部门',
        formatter: ({ cellValue }) => {
          return renderStore.render('dept', 'id', 'name', cellValue);
        },
      },
      // { field: 'userType', title: '用户类型' },
      { field: 'status', title: '状态', slots: { default: 'status_render' } },
    ].concat(props.exColumns || []),
  });
  const findList = () => {
    gridOptions.loading = true;
    getUserPage(queryParams)
      .then(({ data }) => {
        gridOptions.loading = false;
        gridOptions.data = data.content;
        queryParams.page.total = data.total;
      })
      .catch(() => {
        gridOptions.loading = false;
      });
  };
  let currentTreeNode = null;
  function onTreeClick(data) {
    currentTreeNode = data;
    reload();
  }
  const reload = () => {
    queryParams.page.currentPage = 1;
    findList();
  };

  const resetSearchParams = () => {
    queryParams.page.currentPage = 1;
    queryParams.keys = '';
    queryParams.status = 'enable';
  };

  const handlePageChange = ({ currentPage, pageSize }) => {
    queryParams.page.currentPage = currentPage;
    queryParams.page.pageSize = pageSize;
    findList();
  };
  findList();

  const deptTree = ref(DeptTree);
  const userGrid = ref(VxeGrid);
  function getCurrentTreeNode() {
    return currentTreeNode;
  }

  defineExpose({ getCurrentTreeNode, deptTree, userGrid, findList, reload });
</script>
